$icon-font-path: "/bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap/";

// Font Custom Variable
$font-family-sans-serif: "Open Sans", "Helvetica", "Aliquam";
$font-size-base:          13px !default;

// Radius Custom Variable
$border-radius-base:        0px !default;
$border-radius-large:       0px !default;
$border-radius-small:       0px !default;

// Override default colors
$brand-primary:     #007acc !default;

// I don't think this one is necessary (DODOK)
// @import "bootstrap-sass-official/vendor/assets/stylesheets/bootstrap";

// bower:scss
@import "../bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap.scss";
// endbower

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

.primary-color {
  color: $brand-primary;
}

html {
  height: 100%;
}

body {
  height: 100%;
}

#mainContainer {
  min-height: 100%;
  background-color: #fff;
}

#templateMain {
  min-height: 100%;
}

/* Space out content a bit */
body {
    // padding-top: 20px;
    // padding-bottom: 20px;
    // background-color: #ECF0F1;
    color: #2C3E50;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
    padding-left: 15px;
    padding-right: 15px;
}

/* Custom page header */
.header {
    border-bottom: 1px solid #e5e5e5;
}

// Side Panel START
#logo {
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
  display: block;
  background-color: $brand-primary;
}
#side_nav{
  position: fixed;
  top: 50px;
  left: 0;
  bottom: 140px;
  width: 190px;
  color: $brand-primary;
  overflow: auto;
  background-color: #f1f1f1;

  #main_navigation{
    margin-top: 10px;
  }

  // #main_navigation > ul > li > ul > li{
  //   padding-left: 10px;
  // }

  #main_navigation > ul > li > ul > li > a{
    padding: 10px 0px;
    padding-left: 20px;
  }
}
#account_navigation{
  background-color: #f1f1f1;
  position: fixed;
  left: 0;
  bottom: 0;
  height: 136px;
  margin-top: 4px;
  width: 190px;
  padding-top: 10px;
  overflow: auto;
  // border-top: 1px solid $gray-light;
}
// Side Panel END

// Top navigation START
#main_wrapper{
  margin-left: 190px;
  // min-height: 100%;
  /*background-color: #eee;*/
  // padding-left: 10px;
  // padding-right: 10px;
  /*min-height: 800px;*/
}
#breadcrumb_top {
  height: 40px;
  margin-bottom: 0;
  padding-top: 17px;
  // padding-bottom: 10px;
  // border-bottom: 1px solid #ddd;
}
.breadcrumb{
  background-color: #ffffff;

  > li{
    font-size: 0.8em;
    text-transform: uppercase;
    // letter-spacing: 2px;
  }
}
// Top navigation END

#content_header {
  height: 60px;
  line-height: 60px;
  padding-top: 15px;
  padding-bottom: 10px;
  font-weight: 400;
}

#content_header h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 300;
  // text-transform: uppercase;
}

#main_container {
  padding-left: 30px;
  padding-right: 30px;
}

// Links
a {
  &:hover {
    text-decoration: none;
  }
}

// Row
.row {
  margin-bottom: 10px;
}

.row-unstyled {
  margin-bottom: 0;
}



/* Nav List */
.nav.nav-list > li > a{
  margin-left: -15px;
  margin-right: -15px;
  color: $gray;
  /*padding: 15px 15px;*/
}
.nav.nav-list > li > a:hover{
  background-color: #e1e1e1;
}
.nav.nav-list > li.active > a,
.nav.nav-list > li.active > a:hover{
  background-color: #ffffff;
}
.nav-stacked>li+li{
  margin-top: 0;
}

/* Make the masthead heading the same height as the navigation */
.header h3 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 40px;
    padding-bottom: 19px;
}

/* Custom page footer */
.footer {
    padding-top: 19px;
    color: #777;
    border-top: 1px solid #e5e5e5;
}

.container-narrow > hr {
    margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
    text-align: center;
    border-bottom: 1px solid #e5e5e5;
}

.jumbotron .btn {
    font-size: 21px;
    padding: 14px 24px;
}

/* Supporting marketing content */
.marketing {
    margin: 40px 0;
}

.marketing p + h4 {
    margin-top: 28px;
}

.twoCollumns {
  list-style: none;
  margin-left: 0;
}
.twoCollumns li {
  float: left;
  width: 50%;
  margin-top: 15px;
}
.twoCollumns li:first-child, .twoCollumns li:nth-child(2) {
  margin-top: 0;
}

// #LOGIN FORM{
.login-form {
  min-width: 400px;
  max-width: 400px;
  height: 300px;
  margin: 0 auto;
  background-color: #ECF0F1;
  margin-top: 100px;
}
// }

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .container {
        max-width: 730px;
    }

    /* Remove the padding we set earlier */
    .header,
    .marketing,
    .footer {
        padding-left: 0;
        padding-right: 0;
    }
    /* Space out the masthead */
    .header {
        margin-bottom: 30px;
    }
    /* Remove the bottom border on the jumbotron for visual effect */
    .jumbotron {
        border-bottom: 0;
    }
}

// Search message START
.search-message{
  font-size: 18px;
  font-weight: 300;
  // margin-bottom: 10px;
}
// Search message END

// LOADING START
  #circularG{
    position:relative;
    width:250px;
    height:250px;
    margin-left:42%;
    margin-top:4em;
  }
  .circularG{
    position:absolute;
    background-color:#1F54DB;
    width:57px;
    height:57px;
    -moz-border-radius:38px;
    -moz-animation-name:bounce_circularG;
    -moz-animation-duration:1.84s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-direction:linear;
    -webkit-border-radius:38px;
    -webkit-animation-name:bounce_circularG;
    -webkit-animation-duration:1.84s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:linear;
    -ms-border-radius:38px;
    -ms-animation-name:bounce_circularG;
    -ms-animation-duration:1.84s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-direction:linear;
    -o-border-radius:38px;
    -o-animation-name:bounce_circularG;
    -o-animation-duration:1.84s;
    -o-animation-iteration-count:infinite;
    -o-animation-direction:linear;
    border-radius:38px;
    animation-name:bounce_circularG;
    animation-duration:1.84s;
    animation-iteration-count:infinite;
    animation-direction:linear;
  }
  #circularG_1{
    left:0;
    top:98px;
    -moz-animation-delay:0.23s;
    -webkit-animation-delay:0.23s;
    -ms-animation-delay:0.23s;
    -o-animation-delay:0.23s;
    animation-delay:0.23s;
  }
  #circularG_2{
    left:27px;
    top:27px;
    -moz-animation-delay:0.46s;
    -webkit-animation-delay:0.46s;
    -ms-animation-delay:0.46s;
    -o-animation-delay:0.46s;
    animation-delay:0.46s;
  }
  #circularG_3{
    top:0;
    left:98px;
    -moz-animation-delay:0.69s;
    -webkit-animation-delay:0.69s;
    -ms-animation-delay:0.69s;
    -o-animation-delay:0.69s;
    animation-delay:0.69s;
  }
  #circularG_4{
    right:27px;
    top:27px;
    -moz-animation-delay:0.92s;
    -webkit-animation-delay:0.92s;
    -ms-animation-delay:0.92s;
    -o-animation-delay:0.92s;
    animation-delay:0.92s;
  }
  #circularG_5{
    right:0;
    top:98px;
    -moz-animation-delay:1.15s;
    -webkit-animation-delay:1.15s;
    -ms-animation-delay:1.15s;
    -o-animation-delay:1.15s;
    animation-delay:1.15s;
  }
  #circularG_6{
    right:27px;
    bottom:27px;
    -moz-animation-delay:1.38s;
    -webkit-animation-delay:1.38s;
    -ms-animation-delay:1.38s;
    -o-animation-delay:1.38s;
    animation-delay:1.38s;
  }
  #circularG_7{
    left:98px;
    bottom:0;
    -moz-animation-delay:1.61s;
    -webkit-animation-delay:1.61s;
    -ms-animation-delay:1.61s;
    -o-animation-delay:1.61s;
    animation-delay:1.61s;
  }
  #circularG_8{
    left:27px;
    bottom:27px;
    -moz-animation-delay:1.84s;
    -webkit-animation-delay:1.84s;
    -ms-animation-delay:1.84s;
    -o-animation-delay:1.84s;
    animation-delay:1.84s;
  }
  @-moz-keyframes bounce_circularG{
    0%{
    -moz-transform:scale(1)}
    100%{
    -moz-transform:scale(.3)}
  }

  @-webkit-keyframes bounce_circularG{
    0%{
    -webkit-transform:scale(1)}

    100%{
    -webkit-transform:scale(.3)}
  }

  @-ms-keyframes bounce_circularG{
    0%{
    -ms-transform:scale(1)}

    100%{
    -ms-transform:scale(.3)}
  }

  @-o-keyframes bounce_circularG{
    0%{
    -o-transform:scale(1)}

    100%{
    -o-transform:scale(.3)}
  }

  @keyframes bounce_circularG{
    0%{
    transform:scale(1)}

    100%{
    transform:scale(.3)}
  }
// LOADING END

/********************
* Error Container *
* START *
********************/

  #errorContainer {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 62, 80,0.8);
    z-index: 9998;
  }

  #errorContainer .backdrop {
    position: relative;
    width: 100%;
    height: 100%;
  }

  #errorContainer .centering {
    width: 50%;
    height: 60%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;

    text-align: center;
    color: #C0392B;
    background-color: #ECF0F1;
    border-radius: 10px;
    padding: 15px;
    z-index: 9999;
  }

  #errorContainer i {
    font-size: 48px;
    font-size: 25vw;
  }

/********************
* Error Container *
* END *
********************/

/********************
* INVOICE TABLE *
* START *
********************/

.tbItems {
  border-left: 10px solid $brand-primary;
}

.tbItems>td{
  padding: 0 !important;
}

/********************
* INVOICE TABLE *
* END *
********************/


/********************
* NGANIMATE *
* START *
********************/

.itemsRow.ng-hide-remove,
.itemsRow.ng-hide-add {
  display: table-row!important;
}

.itemsRow.ng-hide-add {
  animation-name: hide;
  -webkit-animation-name: hide;

  animation-duration: .5s;
  -webkit-animation-duration: .5s;

  animation-timing-function: ease-in;
  -webkit-animation-timing-function: ease-in;
}

@keyframes hide {
  0% {
    transform: translateX(0%);
  }
  100%{
    transform: translateX(+100%);
  }
}

@-webkit-keyframes hide {
  0% {
    -webkit-transform: translateX(0%);
  }
  100%{
    -webkit-transform: translateX(+100%);
  }
}

.itemsRow.ng-hide-remove {
  animation-name: show;
  -webkit-animation-name: show;

  animation-duration: .5s;
  -webkit-animation-duration: .5s;

  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
}

@keyframes show {
  0% {
    transform: translateX(-100%);
  }
  100%{
    transform: translateX(0%);
  }
}

@-webkit-keyframes show {
  0% {
    -webkit-transform: translateX(-100%);
  }
  100%{
    -webkit-transform: translateX(0%);
  }
}


/********************
* NGANIMATE *
* END *
********************/

.modal .form-horizontal .form-group {
margin-left: 0px;
margin-right: 0px;
}

img {
  max-width: 100%;
}

.tab-content > .tab-pane {
  padding: 10px;
}

dd {
  margin-left: 10px;
  margin-bottom: 5px;
}

.ng-pageslide {
  background: #fff;
  -webkit-box-shadow: -2px 0 10px 0 rgba(0,0,0,0.3);
  box-shadow: -2px 0 10px 0 rgba(0,0,0,0.3);
}

/* ANGULAR BUSY CLASS */
.cg-busy-default-sign{
  position: fixed;
}

/* VALIDATION */

label.required:after{
  content: '*';
}

.has-error label, .has-error div.error{
  color: #C0392B;
}
.has-error div.error {
  padding-left: 10px;
  font-size: 11px;
}

input.ng-invalid.ng-dirty
{
  background-color: #C0392B;
  color: #fff;
}

input.ng-invalid.ng-dirty::-webkit-input-placeholder {
   color: #ECF0F1;
}

input.ng-invalid.ng-dirty:-moz-placeholder { /* Firefox 18- */
   color: #ECF0F1;
}

input.ng-invalid.ng-dirty::-moz-placeholder {  /* Firefox 19+ */
   color: #ECF0F1;
}

input.ng-invalid.ng-dirty:-ms-input-placeholder {
   color: #ECF0F1;
}

/* SPAN FORM CONTROL */

span.form-control {
  color: #95A5A6;
}

// Form-header
.form-header{
  font-weight: 400;
  margin-bottom: 20px;
}

// Open Sans font-weight
.light{font-weight: 300}
.normal{font-weight: 400}
.semi-bold{font-weight: 600}
.bold{font-weight: 700}
.extra-bold{font-weight: 600}

label{
  color: $gray-dark;
}

// Custom dl
.dl-bordered{
  padding-bottom: 10px;
  border-bottom: 1px solid $gray-lighter;

  dt{
    margin-bottom: 5px;
  }

  dd{
    margin-left: 0;
  }
}

// Override Nav-tabs
// .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
//   background-color: transparent;
// }

.nav-tabs {
  border-bottom: none;

  > li {
    > a {
      margin-right: 8px;
      // padding: 6px 12px;
      background-color: $gray-lighter;
      border: none;
      color: $gray-light;
      border-radius: $border-radius-base $border-radius-base $border-radius-base $border-radius-base;
      cursor: pointer;
    }
  }

  > li.active {
    > a, a:hover {
      color: #fff;
      border: none;
      background-color: $brand-primary;

      &:before {
        content: "";
        border-left: 6px dashed transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid $brand-primary;
        position: absolute;
        left: 50%;
        margin-left: -6px;
        bottom: -6px;
      }
    }
  }
}

.tab-pane{
  padding: 20px 0;
}

// Bootstrap Button



// Alternate buttons
// --------------------------------------------------

// .btn-default {
//   @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);
// }
// .btn-primary {
//   @include button-variant($btn-primary-bg, $btn-default-bg, $btn-primary-border);
// }
// // Success appears as green
// .btn-success {
//   @include button-variant($btn-success-bg, $btn-default-bg, $btn-success-border);
// }
// // Info appears as blue-green
// .btn-info {
//   @include button-variant($btn-info-bg, $btn-default-bg, $btn-info-border);
// }
// // Warning appears as orange
// .btn-warning {
//   @include button-variant($btn-warning-bg, $btn-default-bg, $btn-warning-border);
// }
// // Danger and error appear as red
// .btn-danger {
//   @include button-variant($btn-danger-bg, $btn-default-bg, $btn-danger-border);
// }

// OVERRIDE NGPAGESLIDE
.ng-pageslide {
  overflow: auto;
}

.ng-pageslide .ps-content {
  // max-height: 800px;
}

// STUDENT IDS
.student_ids {
  border: 1px solid #333;
  padding: 3px;
  margin-left: 5px;
  margin-bottom: 5px;
  height: 250px;

  .title {
    background-color: #ddd;
    margin-top: 0;
    padding: 3px;
  }

  .content{
    padding: 5px;
  }
}

// PANEL
.panel-title{
  font-size: $font-size-base;
}

.pop-up-custom {
  position: absolute;
  width: 300px;
  height: 400px;
  padding: 15px;
  padding-top: 0;
  background-color: #fff;
  border: 3px solid #34495e;
  z-index: 99999;
}

.pop-up-custom textarea {
  width: 100%;
  height: 300px;
  resize: none;
}

.pop-up-custom.hidden {
  display: none;
}

// Override INPUT-SM style
.input-sm, .input-group-sm > .form-control, .input-group-sm > .input-group-addon, .input-group-sm > .input-group-btn > .btn{
  padding: 2px 5px;
}

.logo-receipt {
  font-family:  "Times New Roman";
  h1, .h1, h2, .h2, h3, .h3 {
    margin-top: 0;
    margin-bottom: 0;
  }
  margin-bottom: 10px;
}

// RECEIPT TABLE
.receipt-table {
  width: 100%;
  margin-bottom: 18px;
  border-collapse: collapse;
  border-spacing: 0;

  thead > tr {
    // border: 1px solid #333;

    th {
      vertical-align: bottom;
      padding: 3px;
    }
  }

  tbody {
    // border: 1px solid #333;

    tr > td, tr > th {
      padding: 3px;

      hr {
        margin-top: 0px;
        margin-bottom: 0px;
        border: 0;
        border-top: 1px solid #333;
      }
    }

    tr.end-sub > td, tr.end-sub > th {
      padding-bottom: 10px;
    }

  }
}

// APPLET STYLE
applet{
  position: absolute;
  bottom: 0;
  right: 0;
}